<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../vue.js"></script>
</head>

<body>
  template 是一个空标签，不会渲染在页面上
  <div id="app">

    <!-- v-for优先级比v-if高，相当于先创建5个div,再将不满足条件的删除(性能较差) -->
    <div v-for="(item,index) in arr" v-if="item>3"> {{ item }} </div>

    <!-- 创建空标签，不会在页面中渲染 -->
    <template v-for="(item,index,arrr) in arr">
      <div v-if="item>3"> {{ arrr}} </div>
    </template>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        arr: [1, 2, 3, 4, 5]
      }
    })
  </script>
</body>

</html>